@import "../layout/flex";
@import "../components/content.scss";

.contextWrapper {
  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  width: 180px;
  overflow-y: hidden;
  overflow-x: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  // overflow-y: auto;

  .contextTitle {
    position: sticky;
    top: 0;
    font-family:
      Greycliff CF,
      var(--mantine-font-family);
    color: var(--mantine-color-gray-8);
    margin-bottom: var(--mantine-spacing-xl);
    background-color: var(--mantine-color-body);
    padding: var(--mantine-spacing-md);
    padding-top: 18px;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
  }

  .contextList {
    height: 90vh;
    // display: flex();

    .contextListItem {
      display: block;
      text-decoration: none;
      border-top-right-radius: var(--mantine-radius-xs);
      border-bottom-right-radius: var(--mantine-radius-xs);
      color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
      padding: 0 var(--mantine-spacing-md);
      font-size: var(--mantine-font-size-sm);
      margin-right: var(--mantine-spacing-md);
      font-weight: 500;
      height: 44px;
      width: 100%;
      line-height: 44px;
      cursor: pointer;

      .contextItemName {
        flex: 1 1 auto;
        width: 130px;
        @include textWrapEllipsis;
      }

      &:hover {
        background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
        color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
      }

      &[data-active] {
        &,
        &:hover {
          border-left-color: var(--mantine-color-blue-filled);
          background-color: var(--mantine-color-blue-filled);
          color: var(--mantine-color-white);
        }
      }
    }
  }
}
